<template>
  <!-- 操作按钮 -->
  <div class="footer">
    <el-button @click="cancel">取消</el-button>
    <el-button v-if="activeStep > 0" @click="prevStep">上一步</el-button>
    <el-button v-if="activeStep < steps.length - 1" @click="nextStep" type="primary">下一步</el-button>
    <el-button v-if="activeStep === steps.length - 1" @click="submit('04')" type="primary"
      :loading="submitLoading">仅保存</el-button>
    <el-button v-if="activeStep === steps.length - 1" @click="submit('02')" type="primary"
      :loading="submitLoading">保存并提交</el-button>
  </div>
</template>

<script setup lang="ts">
import type { Step } from "./type";

const props = defineProps<{
  activeStep: number;
  steps: Step[];
  saveLoading?: boolean;
  submitLoading: boolean;
}>();


const emit = defineEmits<{
  (e: 'cancel'): void;
  (e: 'prevStep'): void;
  (e: 'nextStep'): void;
  (e: 'save'): void;
  (e: 'submit', status: string): void;
}>();

// 取消
const cancel = () => {
  emit('cancel');
};

// 上一步
const prevStep = () => {
  emit('prevStep');
};
// 下一步
const nextStep = () => {
  emit('nextStep');
};
// 仅保存
const save = () => {
  emit('save');
};
// 保存并提交
const submit = (status: string) => {
  emit('submit', status);
};
</script>

<style scoped lang="scss">
.footer {
  border-top: 1px solid #f2f2f2;
  text-align: center;
  padding: 10px 0;
}
</style>
